
var barChart = "";
window.onresize = function () {
	barChart.resize();
}
document.addEventListener('DOMContentLoaded', function () {
	barChart = echarts.init(document.getElementById('barChart'));
	var option = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			x: 'right',
			data: ['实际产量', '不良数'],
			textStyle: {
				color: '#C5F1FF'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['00:00-02:00', '02:00-04:00', '04:00-06:00', '06:00-08:00', '08:00-10:00', '10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00', '18:00-20:00', '20:00-22:00', '22:00-24:00'],
				axisLabel: {
					color: '#C5F1FF'
				},
				axisLine: {
					lineStyle: {
						color: '#C5F1FF'
					}
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					color: '#C5F1FF' // 设置刻度标签颜色为天蓝色
				},
				axisLine: {
					lineStyle: {
						color: '#C5F1FF' // 设置轴线颜色为天蓝色
					}
				},
				splitLine: {
					show: false
				}
			}
		],
		series: [
			{
				name: '实际产量',
				type: 'bar',
				data: [675, 552, 615, 753, 706, 738, 759, 762, 724, 635, 682, 634],
				itemStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0.55, // 上半截天蓝色
								color: 'skyblue'
							},
							{
								offset: 0.8, // 下半截三分之一蓝色
								color: '#5563FF'
							}
						],
						global: false // 缺省为 false
					}
				},
				label: {
					show: true,
					position: 'top',
					color: '#C5F1FF',
					fontSize: 12
				},
				// markPoint: {
				// 	data: [
				// 		{ type: 'max', name: '最大值' },
				// 		{ type: 'min', name: '最小值' }
				// 	]
				// },
				markLine: {
					data: [
						{ type: 'average', name: '平均值', label: { textStyle: { color: '#C5F1FF' } } }
					]
				}
			},
			{
				name: '不良数',
				type: 'bar',
				data: [82, 90, 92, 81, 72, 70, 95, 82, 93, 73, 86, 96],
				itemStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0.25, // 上半截浅红色
								color: 'lightcoral'
							},
							{
								offset: 0.25, // 渐变开始
								color: 'lightcoral'
							},
							{
								offset: 1, // 下半截红色
								color: 'red'
							}
						],
						global: false // 缺省为 false
					}
				},
				label: {
					show: true,
					position: 'top',
					color: '#C5F1FF',
					fontSize: 12
				},
				// markPoint: {
				// 	data: [
				// 		{ name: '最大值', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
				// 		{ name: '最小值', value: 2.3, xAxis: 11, yAxis: 3 }
				// 	]
				// },
				markLine: {
					data: [
						{ type: 'average', name: '平均值', label: { textStyle: { color: '#C5F1FF' } } }
					]
				}
			}
		]
	};
	barChart.setOption(option)
});